<template>
    <div>
        <!-- 顶部导航 -->
        <div class="header">
            <img style="width: 90px" @click="toPage('/userIndex')" src="../assets/image/logo.png" />
            <div class="header1">
                <div @click="toPage('/userIndex')" class="menu-item">首页</div>
                <div @click="toPage('/userEquipment')" class="menu-item">滑雪设备</div>
                <div @click="toPage('/userTrack')" class="menu-item">滑雪赛道</div>
                <div @click="toPage('/userCoach')" class="menu-item">教练展示</div>
                <div @click="toPage('/userOwn')" class="menu-item">个人中心</div>
            </div>
            <div class="header2" v-if="user">
                <div class="header3">
                    {{ user.name }}
                </div>
                <div class="header4" @click="loginOut">退出登录</div>
            </div>
        </div>

        <!-- 教练展示 -->
        <div class="coach-showcase">
            <h1 class="title">滑雪教练展示</h1>
            <div class="coach-grid">
                <div v-for="coach in tableData" :key="coach.id" class="coach-card">
                    <div class="coach-info" @click="reservation(coach)">
                        <h2 class="coach-name">{{ coach.name }}</h2>
                        <p class="coach-level">级别：{{ coach.level }}</p>
                        <p class="coach-experience">经验：{{ coach.experience }} 年</p>
                        <p class="coach-status">
                            状态：<span :class="coach.status">{{ coach.status }}</span>
                        </p>
                    </div>
                </div>
            </div>

            <!-- 弹窗：预约信息 -->
            <el-dialog v-model="dialogTableVisible" title="预约信息" width="30%" style="margin-top: -50px">
                <el-form :model="reservationForm" label-width="auto" style="max-width: 600px">
                    <el-form-item label="用户名">
                        <el-input v-model="reservationForm.uname" readonly />
                    </el-form-item>
                    <el-form-item label="教练ID">
                        <el-input v-model="reservationForm.cid" readonly />
                    </el-form-item>
                    <el-form-item label="教练姓名">
                        <el-input v-model="reservationForm.cname" readonly />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="doReservation">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessageBox, ElMessage } from 'element-plus'

const router = useRouter()

// 用户信息
const user = ref(null)

// 教练列表数据
const tableData = ref([])

// 弹窗显示控制
const dialogTableVisible = ref(false)

// 预约表单
const reservationForm = ref({
    uid: '',
    uname: '',
    cid: '',
    cname: ''
})

// 页面跳转
function toPage(path) {
    router.push(path)
}

// 注销登录
function loginOut() {
    ElMessageBox.confirm('注销登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        localStorage.removeItem('user')
        router.replace('/login')
    })
}

// 点击教练预约按钮
function reservation(coach) {
    if (coach.status === '可预约') {
        dialogTableVisible.value = true
        reservationForm.value = {
            uid: user.value.id,
            uname: user.value.name,
            cid: coach.id,
            cname: coach.name
        }
    } else {
        const msg = coach.status === '已满' ? '已约满，请选择其他教练' : '休假中，请选择其他教练'
        ElMessageBox.alert(msg, '', { confirmButtonText: '确定' })
    }
}

// 提交预约
function doReservation() {
    axios
        .post(`http://localhost:8181/coach/reservation/${reservationForm.value.cid}/${user.value.id}`)
        .then((res) => {
            if (res.data === true) {
                ElMessageBox.alert(`教练【${reservationForm.value.cname}】预约成功`, '', {
                    confirmButtonText: '确定',
                    callback: () => {
                        location.reload()
                    }
                })
            }
        })
}

// 加载数据
onMounted(() => {
    const local = localStorage.getItem('user')
    if (local) {
        user.value = JSON.parse(local)
    } else {
        router.replace('/login')
        return
    }

    axios.get('http://localhost:8181/coach/list').then((res) => {
        tableData.value = res.data
    })
})
</script>

<style src="../assets/css/header.css"></style>

<style scoped>
/* 保持原有样式不变 */
.coach-showcase {
    padding: 20px;
    font-family: Arial, sans-serif;
    background-color: #f0f4f8;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.title {
    text-align: center;
    color: #2c3e50;
    font-size: 2.5rem;
    margin-bottom: 20px;
    animation: fadeInDown 1s;
}

.coach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.coach-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    padding: 20px;
}

.coach-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.coach-info {
    text-align: center;
}

.coach-name {
    font-size: 1.5rem;
    color: #34495e;
    margin-bottom: 10px;
}

.coach-level,
.coach-experience,
.coach-status {
    font-size: 1rem;
    color: #7f8c8d;
    margin-bottom: 8px;
}

.coach-status span {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    color: white;
}

.coach-status .可预约 {
    background-color: #2ecc71;
}

.coach-status .已满 {
    background-color: #e74c3c;
}

.coach-status .休假中 {
    background-color: #f39c12;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
